<template>
    <div>
        <h3 id="demo">测试Axios组件</h3>
        <p>图书的数量是：{{books.length}}</p>
        <table class="table table-hover">
            <tbody>
                <tr v-for="book in books">
                    <td>{{book.id}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.cover}}</td>
                    <td>{{book.createTime}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                </tr>
            </tbody>
        </table>
        <button @click="getById(1)">测试getByid</button>
        {{book}}
        <hr>
<!--        <button @click="saveBook">测试保存书</button>-->
        <form v-model="book">
            <input type="text" v-model="book.id"> <br>
            <input type="text" v-model="book.author"> <br>
            <button type="submit" @click="saveBook2">保存图书</button>
        </form>
        <hr>
        <p @click="msg+='='">{{msg}}</p>
        <hr>
        <MyProp v-if="flag" :init="0"></MyProp>
        <button @click="testDestroy">测试销毁destroy生命周期</button>
    </div>
</template>

<script>
    import axios from '../axios.js'
    export default {
        name: "life",
        data(){
            return{
                books:[],
                book:{},
                msg:'vue',
                flag:true
            }
        },
        methods:{
            async getBooks(){
              const {
                  data:data
              } = await axios.get('http://127.0.0.1:9090/book')
                console.log(data)
                this.books = data.data.records
            },
            async getById(bookId){
                const {
                    data:res
                } = await axios.get('http://127.0.0.1:9090/book/'+bookId)
                console.log(res)
                this.book = res.data
            },
            async saveBook(){
                const {
                    data:res
                } = await axios.post('http://127.0.0.1:9090/book/',{
                    id:'3',
                    author:'laozhang'
                })
            },
            async saveBook2(){
                const {
                    data:res
                } = await axios.post('http://127.0.0.1:9090/book/',this.book)
            },
            testDestroy(){
                this.flag = false
            }
        },
        beforeCreate() {
            console.log("组件创建之前...")
        },
        created() {
            console.log("组件已经被创建了...")
            this.getBooks()
        },
        beforeMount() {
            console.log("beforeMount执行了,但是dom对象还未渲染到页面")
            console.log(document.getElementById("demo"))
        },
        mounted() {
            console.log("mounted执行了,dom已经渲染到页面上")
            console.log(document.getElementById("demo"))
        },
        beforeUpdate() {
            console.log("beforeUpdate被执行...")
        },
        updated() {
            console.log("update被执行...")
            console.log('测试git提交代码')
        }
    }
</script>

<style scoped>
    @import "../assets/bootstrap.css";
</style>